<template>
    <div class="center-project">
      <div style="width: 100%;height: 60px;border-bottom: #1C97FF 1px solid;padding:  10px 20px;display: flex;">
        <img style="width: 340px; height: 40px; margin-right: 20px;" src="@/assets/bigScreen/index/LOGO.jpg" alt="">
        <big-tab-Bar />
      </div>
      <div class="project-list">
        <el-button type="primary" style="background-color: #1C97FF;margin-bottom: 20px;float: right;" icon="el-icon-plus" @click="handleAdd">新增项目</el-button>
        <el-table v-loading="loading" :height="tableHeight" :data="infoList">
          <el-table-column type="index" width="50" align="center" label="序号"/>
          <el-table-column label="项目名称" align="center" prop="projectName" />
          <el-table-column label="项目类型" align="center" prop="projectType" >
            <template slot-scope="scope">
              {{selectDictLabel($store.state.referenceDict.projectType, scope.row.projectType)}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center"  class-name="small-padding fixed-width" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="whiteText" icon="el-icon-edit" @click="intoProjectStep(scope.row)">计算</el-button>
              <el-button size="mini" type="whiteText" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button size="mini" type="whiteText" icon="el-icon-delete" @click="delFun(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination project-select="projectSelect" v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-sizes="[10,15]" @pagination="getList"/>
      </div>
      <project-Info  ref="projectInfoRef" @fatherGoPath="getList" />
      <product-carbon-stage-form  ref="ProductCarbonStageFormRef" />
  
    </div>
  </template>
  <script>
  import { delProject, listProject,selectProjectByUser } from "@/api/eleLoad/project";
  import Cookies from 'js-cookie'
  import resize from "@/views/dashboard/mixins/resize";
  import projectInfo from "@/views/bigScreen/project/project-info.vue";
  import ProductCarbonStageForm from "@/views/bigScreen/project/ProductCarbonStageForm.vue";
  import bigTabBar from '@/views/components/bigTabBar/index'
  export default {
    name: "project-index",
    mixins: [resize],
    components: {
        projectInfo,ProductCarbonStageForm,bigTabBar
    },
    data() {
      return {
        isMobile:false,
        barChartTitle: '',
        // 遮罩层
        loading: false,
        // 项目列表表格数据
        infoList: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          projectName: null,
          projectType: null,
          userId: null,
          deptId: null,
          creationTime: null,
        },
        pdfDrawer: false,
        direction: 'rtl',
        tableHeight: '',
      }
    },
    watch: {},
    created() {
      this.tableHeight = window.innerHeight - 200;
      this.isMobile = document.documentElement.offsetWidth<501;
      this.getList();
    },
    mounted() {},
    methods: {
      getList() {
        this.loading = true;
        selectProjectByUser(this.queryParams).then(response=>{
          this.infoList = response.data;
          if (this.infoList.length != 0) {
            this.$store.commit('SET_PROJECT',this.infoList[0].projectId);
          }
          // this.total = response.total;
          this.loading = false;
        })
      },
      handleAdd() {
        this.$refs.projectInfoRef.handleAdd()
      },
      handleUpdate(row){
        this.$refs.projectInfoRef.handleUpdate(row)
      },
      delFun(row){
        const projectId = row.projectId;
        this.$confirm('是否确认删除当前的项目?', "警告", {
          confirmButtonClass:"el-button--projectBut",
          cancelButtonClass:"el-button--projectCan",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delProject(projectId);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function () {
          this.loading = false;
        });
      },
      intoProjectStep(row){
        this.$store.commit('SET_PROJECT', row.projectId);
        this.$refs.ProductCarbonStageFormRef.handleShow()
        // let dataBoundaryList = [];
        // let stepList = [];
        // dataBoundaryList = row.dataBoundary.split(',');
        // dataBoundaryList.map(item => {
        //   if (item == '化石燃料燃烧排放量') {
        //     stepList.push(
        //         {
        //             name: '化石燃料',
        //             parentId: 100,
        //             id: 10,
        //             type: 1,
        //             children:[
        //               {name: '固体燃料',parentId:10, id: 11, type: 2, children: null},
        //               {name: '液体燃料',parentId:10, id: 12, type: 2, children: null},
        //               {name: '气体燃料',parentId:10, id: 13, type: 2, children: null},
        //             ]
        //         }
        //     )
        //   } else if (item == '过程排放量') {
        //     stepList.push(
        //         {
        //             name: '过程排放',
        //             parentId: 102,
        //             id: 17,
        //             type: 1,
        //             children:[
        //               {name: '脱硫',parentId:17, id: 18, type: 2, children: null},
        //               {name: '脱销',parentId:17, id: 19, type: 2, children: null},
        //               {name: '炸药',parentId:17, id: 20, type: 2, children: null},
        //               {name: '切焊加热',parentId:17, id: 21, type: 2, children: null},
        //               {name: '直接释放',parentId:17, id: 22, type: 2, children: null},
        //             ]
        //         }
        //     )
        //   } else if (item == '购入电力、热力产生的排放量') {
        //     stepList.push(
        //         {
        //             name: '电力电热',
        //             parentId: 101,
        //             id: 14,
        //             type: 1,
        //             children:[
        //               {name: '电力排放',parentId:14, id: 15, type: 2, children: null},
        //               {name: '热力排放',parentId:14, id: 16, type: 2, children: null},
        //             ]
        //         }
        //     )
        //   } else if (item == '碳交易量') {
        //     stepList.push(
        //         {
        //             name: '碳交易',
        //             parentId: 103,
        //             id: 23,
        //             type: 1,
        //             children:[
        //               {name: 'CCER',parentId:23, id: 24, type: 2, children: null},
        //               {name: '谈惠普',parentId:23, id: 25, type: 2, children: null},
        //             ]
        //         }
        //     )
        //   } else if (item == '碳抵消量') {
        //     stepList.push(
        //         {
        //             name: '碳抵消',
        //             parentId: 104,
        //             id: 26,
        //             type: 1,
        //             children:[
        //               {name: '绿化',parentId:26, id: 27, type: 2, children: null},
        //               {name: '回收利用',parentId:26, id: 28, type: 2, children: null},
        //               {name: '绿证',parentId:26, id: 29, type: 2, children: null},
        //             ]
        //         }
        //     )
        //   }
        // })
        // this.$refs.ProductCarbonStageFormRef.handleShow(stepList)
        // this.$store.commit('SET_STEP_LIST',stepList);
      },
  
    },
  }
  </script>
  <style lang="scss" scoped>
  .center-project{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000D17;
    // background: url("../../assets/bg2.jpg") no-repeat;
    // background-size: 100% 100%;
  }
  // .btn-close{
  //   position: absolute;
  //   top: 12px;
  //   right: 140px;
  //   color: #FFF;
  //   font-size: 21px;
  //   padding: 7px;
  //   line-height: 20px;
  //   border-radius: 50%;
  //   cursor: pointer;
  //   &:hover{
  //     background-color: #424649;
  //   }
  // }
  .project-list{
    position: absolute;
    z-index: 2;
    width: 100%;
    // height: 88%;
    height: calc(100% - 60px);
    right: 0px;
    padding: 20px;
    //background-color:rgba(0,0,0,0.2);
    ::v-deep{
      .el-table{
        height: 100%;
      }
      .has-gutter{
        background-color: #2E98CA;
      }
      .el-table .el-table__row:hover td{
        cursor: pointer;
        background-color: rgba(#00afff,0.5) !important;
      }
      .el-table--medium td{
         padding: 6px 0 ;
      }
      .el-table,.el-table::before,.el-table th.el-table__cell,.el-table tr{
        background-color: transparent !important;
      }
      // .el-table--scrollable-y .el-table__body-wrapper {
      //   overflow-y: hidden;
      // }
      .el-table .el-table__header-wrapper th,.el-table--enable-row-transition .el-table__body td{
        color: #FFFFFF;
        background-color: transparent !important;
      }
      .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
        border-bottom: none;
        color: #FFFFFF;
        background-color: transparent !important;
      }
      .pagination-container{
        background:transparent !important;
      }
      .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #409EFF !important;
        color: #FFFFFF;
      }
      .el-pagination.is-background .el-pager li:not(.disabled):hover{
        background-color: #409EFF !important;
        color: #FFFFFF;
      }
    }
  }
  @media screen and (min-width:300px) and (max-width:500px){
    .map-right{
      width: 92% !important;
      height: 80% !important;
      top: 5vh;
      ::v-deep{
        .el-table__row td{
          padding: 7px 0px;
        }
      }
    }
    .pagination-container{
      width: 100%;
    }
    .pagination-container /deep/{
      .el-pagination{
        left: 50%;
        right: unset;
        transform: translateX(-50%);
        .el-pager li{
          margin: 0 2px;
        }
      }
      .el-pagination__sizes,.el-pagination__total,.el-pagination__jump{
        display: none;
      }
    }
  
  }
  </style>
  